<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:27:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:24:14
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
-->
<template>
  <div
    class="right_center_wrap beautify-scroll-def"
    :class="{ 'overflow-y-auto': !sbtxSwiperFlag }"
  >
    <!-- 当有数据时显示列表 -->
    <component
      v-if="list.length > 0"
      :is="components"
      :data="list"
      :class-option="defaultOption"
    >
      <ul class="right_center">
        <li
          class="right_center_item"
          v-for="(item, i) in list"
          :key="i"
          @click="showDetailModal(item, i)"
        >
          <span
            class="orderNum"
            :class="getWarningLevelClass(item.warning_level)"
            >{{ i + 1 }}</span
          >
          <div class="inner_right">
            <div class="dibu"></div>

            <!-- 第一行：学号、姓名、警告等级 -->
            <div class="flex">
              <div class="info">
                <span class="labels">学号：</span>
                <span class="contents zhuyao">{{ item.xh }}</span>
              </div>
              <div class="info">
                <span class="labels">姓名：</span>
                <span class="contents warning">{{ item.xm }}</span>
              </div>
              <div class="info">
                <span class="labels">等级：</span>
                <span
                  class="contents"
                  :class="getWarningLevelClass(item.warning_level)"
                  style="font-size: 12px"
                >
                  {{ getWarningLevelText(item.warning_level) }}
                </span>
              </div>
            </div>

            <!-- 第二行：预报到时间、延迟时长 -->
            <div class="flex">
              <div class="info">
                <span class="labels">预报到：</span>
                <span class="contents ciyao">{{
                  formatDate(item.ybdsj) || "无"
                }}</span>
              </div>
              <div class="info">
                <span class="labels">延迟：</span>
                <span class="contents" :class="getDelayClass(item.delayHours)">
                  {{ formatDelayHours(item.delayHours) }}
                </span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </component>

    <!-- 当数据为空时显示暂无数据 -->
    <div v-else class="no-data">
      <div class="no-data-text">暂无报警信息</div>
    </div>

    <!-- 详情弹框 - 使用 div 实现 -->
    <div
      v-if="detailModalVisible"
      class="warning-detail-modal"
      @click="closeModalOnBackdrop"
    >
      <div class="modal-dialog" @click.stop>
        <div v-if="currentItem" class="dialog-container">
          <!-- 参考conversation-dialog的header样式 -->
          <div class="dialog-header">
            <div class="student-info-section">
              <div class="student-avatar">
                <div class="avatar-circle">
                  {{ currentItem.xm.charAt(0) }}
                </div>
              </div>
              <div class="student-details">
                <h3 class="student-name">{{ currentItem.xm }}</h3>
                <p class="student-number">学号：{{ currentItem.xh }}</p>
              </div>
            </div>
            <div class="warning-status">
              <div
                class="warning-badge"
                :class="getWarningLevelClass(currentItem.warning_level)"
              >
                <div class="badge-icon">⚠</div>
                <div class="badge-text">
                  {{ getWarningLevelText(currentItem.warning_level) }}
                </div>
              </div>
            </div>
            <!-- 关闭按钮 -->
            <div class="close-btn" @click="detailModalVisible = false">
              <i class="el-icon-close"></i>
            </div>
          </div>

          <!-- 参考conversation-dialog的内容区域样式 -->
          <div class="dialog-content">
            <div class="info-grid">
              <div class="info-card">
                <div class="card-icon">📅</div>
                <div class="card-content">
                  <div class="card-label">预报到时间</div>
                  <div class="card-value">
                    {{ formatDate(currentItem.ybdsj) || "无" }}
                  </div>
                </div>
              </div>

              <div class="info-card">
                <div class="card-icon">📞</div>
                <div class="card-content">
                  <div class="card-label">联系方式</div>
                  <div class="card-value">{{ currentItem.lxdh || "暂无" }}</div>
                </div>
              </div>

              <div class="info-card">
                <div class="card-icon">⏰</div>
                <div class="card-content">
                  <div class="card-label">延迟时长</div>
                  <div
                    class="card-value"
                    :class="getDelayClass(currentItem.delayHours)"
                  >
                    {{ formatDelayHours(currentItem.delayHours) }}
                  </div>
                </div>
              </div>

              <div class="info-card">
                <div class="card-icon">🚨</div>
                <div class="card-content">
                  <div class="card-label">警告等级</div>
                  <div
                    class="card-value"
                    :class="getWarningLevelClass(currentItem.warning_level)"
                  >
                    {{ getWarningLevelText(currentItem.warning_level) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { httpAlarmInfo } from "@/api";
  import vueSeamlessScroll from "vue-seamless-scroll";
  import Kong from "../../components/kong.vue";

  export default {
    components: { vueSeamlessScroll, Kong },

    data() {
      return {
        list: [],
        detailModalVisible: false,
        currentItem: null,
        currentIndex: -1,
        defaultOption: {
          ...this.$store.state.setting.defaultOption,
          limitMoveNum: 4,
          singleHeight: 160,
          step: 0,
        },
        pollingTimer: null, // 轮询定时器
      };
    },
    computed: {
      sbtxSwiperFlag() {
        let ssyjSwiper = this.$store.state.setting.ssyjSwiper;
        if (ssyjSwiper) {
          this.components = vueSeamlessScroll;
        } else {
          this.components = Kong;
        }
        return ssyjSwiper;
      },
    },
    created() {
      this.getData();
      this.startPolling();
    },

    mounted() {
      // 监听 ESC 键关闭弹框
      document.addEventListener("keydown", this.handleKeyDown);
    },

    beforeDestroy() {
      // 清理事件监听器和定时器
      document.removeEventListener("keydown", this.handleKeyDown);
      this.stopPolling();
    },

    methods: {
      getData() {
        httpAlarmInfo()
          .then((res) => {
            console.log("报警信息", res);
            if (res.code === "0" && res.data) {
              this.list = res.data.warningDetails || [];

              let timer = setTimeout(() => {
                clearTimeout(timer);
                this.defaultOption.step =
                  this.$store.state.setting.defaultOption.step;
              }, this.$store.state.setting.defaultOption.waitTime);
            } else {
              this.list = [];
            }
          })
          .catch((error) => {
            console.error("接口调用失败:", error);
            this.list = [];
          });
      },

      // 开始轮询
      startPolling() {
        // 每10分钟轮询一次 (10 * 60 * 1000 = 600000ms)
        this.pollingTimer = setInterval(() => {
          this.getData();
        }, 10 * 60 * 1000);
      },

      // 停止轮询
      stopPolling() {
        if (this.pollingTimer) {
          clearInterval(this.pollingTimer);
          this.pollingTimer = null;
        }
      },

      showDetailModal(item, index) {
        this.currentItem = item;
        this.currentIndex = index;
        this.detailModalVisible = true;
      },

      // ESC 键关闭弹框
      handleKeyDown(event) {
        if (event.key === "Escape" && this.detailModalVisible) {
          this.detailModalVisible = false;
        }
      },

      // 点击背景关闭弹框
      closeModalOnBackdrop(event) {
        if (event.target === event.currentTarget) {
          this.detailModalVisible = false;
        }
      },

      formatDate(dateString) {
        if (!dateString) return "无";
        try {
          const date = new Date(dateString);
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, "0");
          const day = String(date.getDate()).padStart(2, "0");
          const hours = String(date.getHours()).padStart(2, "0");
          const minutes = String(date.getMinutes()).padStart(2, "0");
          return `${month}-${day} ${hours}:${minutes}`;
        } catch (error) {
          console.error("日期格式化失败:", error);
          return dateString;
        }
      },

      formatDelayHours(delayHours) {
        if (delayHours === null || delayHours === undefined) return "无";

        if (delayHours < 1) {
          const minutes = Math.floor(delayHours * 60);
          return `${minutes}分钟`;
        } else if (delayHours < 24) {
          return `${delayHours.toFixed(1)}小时`;
        } else {
          const days = Math.floor(delayHours / 24);
          const hours = Math.floor(delayHours % 24);
          return hours > 0 ? `${days}天${hours}小时` : `${days}天`;
        }
      },

      getWarningLevelText(level) {
        const levelMap = {
          1: "轻微",
          2: "警告",
          3: "严重",
        };
        return levelMap[level] || "未知";
      },

      getWarningLevelClass(level) {
        const classMap = {
          1: "warning-level-1",
          2: "warning-level-2",
          3: "warning-level-3",
        };
        return classMap[level] || "";
      },

      getDelayClass(delayHours) {
        if (delayHours === null || delayHours === undefined) return "";

        if (delayHours < 1) {
          return "delay-minor";
        } else if (delayHours < 24) {
          return "delay-moderate";
        } else {
          return "delay-severe";
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .right_center {
    width: 100%;
    height: 100%;

    .right_center_item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: auto;
      padding: 8px 16px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 4px;
      margin-bottom: 8px;

      &:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: translateX(3px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }

      .orderNum {
        margin: 0 15px 0 -15px;
        font-weight: bold;
        font-size: 16px;
        min-width: 20px;
        text-align: center;

        &.warning-level-1 {
          color: #f1c40f;
        }

        &.warning-level-2 {
          color: #ff9500;
        }

        &.warning-level-3 {
          color: #e74c3c;
        }
      }

      .inner_right {
        position: relative;
        height: 100%;
        width: 380px;
        flex-shrink: 0;
        line-height: 1.4;
        flex: 1;

        .dibu {
          position: absolute;
          height: 2px;
          width: 104%;
          background-image: url("../../assets/img/zuo_xuxian.png");
          bottom: -6px;
          left: -2%;
          background-size: cover;
        }
      }

      .flex {
        margin-bottom: 6px;
        justify-content: space-between;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .info {
        margin-right: 12px;
        display: flex;
        align-items: center;

        .labels {
          flex-shrink: 0;
          font-size: 11px;
          color: rgba(255, 255, 255, 0.6);
          min-width: 40px;
        }

        .zhuyao {
          color: $primary-color;
          font-size: 13px;
        }

        .ciyao {
          color: rgba(255, 255, 255, 0.8);
          font-size: 12px;
        }

        .warning {
          color: #e6a23c;
          font-size: 13px;
          font-weight: bold;
        }

        .warning-level-1 {
          color: #f1c40f;
          font-weight: bold;
        }

        .warning-level-2 {
          color: #ff9500;
          font-weight: bold;
        }

        .warning-level-3 {
          color: #e74c3c;
          font-weight: bold;
        }

        .delay-minor {
          color: #2ecc71;
        }

        .delay-moderate {
          color: #f39c12;
        }

        .delay-severe {
          color: #e74c3c;
          font-weight: bold;
        }
      }
    }
  }

  .right_center_wrap {
    overflow: hidden;
    width: 100%;
    height: 250px;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;

    .no-data-text {
      color: rgba(255, 255, 255, 0.6);
      font-size: 18px;
      text-align: center;
      padding: 20px;
      position: relative;

      &::before {
        content: "🔒";
        display: block;
        font-size: 32px;
        margin-bottom: 8px;
        opacity: 0.6;
      }

      &::after {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        background: linear-gradient(
          45deg,
          transparent 30%,
          rgba(255, 255, 255, 0.05) 50%,
          transparent 70%
        );
        border-radius: 8px;
        z-index: -1;
      }
    }
  }

  // 弹框样式 - 参考 conversation-dialog
  .warning-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: modalFadeIn 0.3s ease-out;

    .modal-dialog {
      width: 700px;
      max-width: 90vw;
      max-height: 90vh;
      animation: modalSlideIn 0.3s ease-out;
    }

    .dialog-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      background: linear-gradient(
          180deg,
          #0356bd 0%,
          rgba(3, 86, 189, 0) 34%,
          rgba(3, 86, 189, 0) 51%,
          #0356bd 100%
        ),
        #0c1b37;
      border: 1px solid #31abfc;
      border-radius: 16px;
      box-shadow: 0px 4px 13px 4px #1855a2;
      backdrop-filter: blur(10px);
      opacity: 0.95;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(49, 171, 252, 0.02) 0%,
          rgba(49, 171, 252, 0.01) 50%,
          rgba(49, 171, 252, 0.02) 100%
        );
        border-radius: 16px;
        pointer-events: none;
      }
    }

    // 参考conversation-dialog的header样式
    .dialog-header {
      background: linear-gradient(
        135deg,
        rgba(3, 86, 189, 0.95) 0%,
        rgba(12, 27, 55, 0.95) 100%
      );
      border: 1px solid #31abfc;
      border-radius: 16px 16px 0 0;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 8px rgba(24, 85, 162, 0.3);
      backdrop-filter: blur(10px);
      position: relative;

      .student-info-section {
        display: flex;
        align-items: center;
        gap: 16px;
        flex: 1;

        .student-avatar {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background: linear-gradient(45deg, #00fdfa, #0099cc);
          border: 2px solid #00fdfa;
          padding: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 16px rgba(0, 253, 250, 0.4);

          .avatar-circle {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(135deg, #00fdfa 0%, #0099cc 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
          }
        }

        .student-details {
          .student-name {
            color: #00fdfa;
            font-size: 22px;
            font-weight: 700;
            margin: 0 0 6px 0;
            text-shadow: 0 2px 8px rgba(0, 253, 250, 0.5);
            letter-spacing: 1px;
          }

          .student-number {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 0;
            opacity: 0.95;
            font-weight: 400;
          }
        }
      }

      .warning-status {
        display: flex;
        align-items: center;

        .warning-badge {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 18px;
          border-radius: 25px;
          backdrop-filter: blur(8px);
          border: 2px solid;
          background: rgba(255, 255, 255, 0.1);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

          .badge-icon {
            font-size: 18px;
          }

          .badge-text {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.5px;
          }

          &.warning-level-1 {
            color: #f1c40f;
            border-color: #f1c40f;
            background: rgba(241, 196, 15, 0.15);
            box-shadow: 0 0 20px rgba(241, 196, 15, 0.3);
          }

          &.warning-level-2 {
            color: #ff9500;
            border-color: #ff9500;
            background: rgba(255, 149, 0, 0.15);
            box-shadow: 0 0 20px rgba(255, 149, 0, 0.3);
          }

          &.warning-level-3 {
            color: #e74c3c;
            border-color: #e74c3c;
            background: rgba(231, 76, 60, 0.15);
            box-shadow: 0 0 20px rgba(231, 76, 60, 0.3);
          }
        }
      }

      .close-btn {
        position: absolute;
        right: -18px;
        top: -18px;
        width: 36px;
        height: 36px;
        background: linear-gradient(45deg, #ff4757, #ff3742);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
        z-index: 100;

        &:hover {
          transform: scale(1.1);
          box-shadow: 0 6px 16px rgba(255, 71, 87, 0.4);
        }

        i {
          font-size: 18px;
          color: #fff;
        }
      }
    }

    // 内容区域
    .dialog-content {
      flex: 1;
      padding: 24px;

      .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .info-card {
        display: flex;
        align-items: center;
        padding: 18px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid rgba(49, 171, 252, 0.2);
        transition: all 0.3s ease;
        backdrop-filter: blur(8px);

        &:hover {
          background: rgba(49, 171, 252, 0.08);
          border-color: rgba(49, 171, 252, 0.3);
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(49, 171, 252, 0.15);
        }

        .card-icon {
          font-size: 28px;
          margin-right: 16px;
          opacity: 0.9;
          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }

        .card-content {
          flex: 1;

          .card-label {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 6px;
            font-weight: 400;
            letter-spacing: 0.5px;
          }

          .card-value {
            font-size: 16px;
            color: #fff;
            font-weight: 500;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

            &.warning-level-1 {
              color: #f1c40f;
              text-shadow: 0 0 8px rgba(241, 196, 15, 0.4);
            }

            &.warning-level-2 {
              color: #ff9500;
              text-shadow: 0 0 8px rgba(255, 149, 0, 0.4);
            }

            &.warning-level-3 {
              color: #e74c3c;
              text-shadow: 0 0 8px rgba(231, 76, 60, 0.4);
            }

            &.delay-minor {
              color: #2ecc71;
              text-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
            }

            &.delay-moderate {
              color: #f39c12;
              text-shadow: 0 0 8px rgba(243, 156, 18, 0.4);
            }

            &.delay-severe {
              color: #e74c3c;
              text-shadow: 0 0 8px rgba(231, 76, 60, 0.4);
            }
          }
        }
      }
    }
  }

  // 弹框动画
  @keyframes modalFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes modalSlideIn {
    from {
      transform: scale(0.9) translateY(-20px);
      opacity: 0;
    }
    to {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }

  // 状态指示器动画
  @keyframes statusPulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.05);
    }
  }
</style>
